<template>
  <BasicModal
    v-bind="$attrs"
    @ok="handleSubmint"
    :minHeight="20"
    okText="提交"
    @register="register"
    :title="modalTitle"
    :loading="loading"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { computed, nextTick, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { adddevicemodel, updatedevicemodel } from '/@/api/equipmentModel/index';
  import { getdevicetypes } from '/@/api/equipmentType/index';
  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  let loading = ref(false);
  let CategoryObj = {
    1: '生产设备',
    2: '检测设备',
    3: '辅助设备',
    4: '厂务设备',
    5: '仪器仪表',
    6: '办公设备',
    7: ' IT设备',
    8: '其它',
  };
  let modalTitle = computed(() => {
    return `${props.info.type === 'add' ? '新建' : '编辑'}设备类型`;
  });
  // 表单内容
  const schemas: FormSchema[] = [
    // {
    //   field: 'DeviceTypeId',
    //   component: 'Select',
    //   label: '设备类型：',
    //   colProps: {
    //     span: 24,
    //   },
    //   componentProps: {
    //     options: [],
    //     onChange: (e) => {
    //       let tagretInfo = deviceTypeList.filter((item) => item.Id === e);
    //       if (tagretInfo.length > 0) {
    //         setFieldsValue({ DeviceTypeCategory: tagretInfo[0].CategoryCn });
    //       }
    //     },
    //     fieldNames: { label: 'TypeName', value: 'Id', key: 'Id' },
    //   },
    //   rules: [
    //     {
    //       required: true,
    //       message: '请输入设备类型',
    //       trigger: ['change', 'blur'],
    //     },
    //   ],
    // },
    // {
    //   field: 'DeviceTypeCategory',
    //   component: 'Input',
    //   label: '设备类别：',
    //   colProps: {
    //     span: 24,
    //   },
    //   componentProps: {
    //     disabled: true,
    //   },
    // },
    {
      field: 'Code',
      component: 'Input',
      label: '型号编码：',
      colProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入型号编码',
          trigger: ['change', 'blur'],
        },
      ],
    },
    {
      field: 'Name',
      component: 'Input',
      label: '型号名称：',
      colProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入型号名称',
          trigger: ['change', 'blur'],
        },
      ],
    },
    // {
    //   field: 'TechnicalSpec',
    //   component: 'Input',
    //   label: '技术规格：',
    //   colProps: {
    //     span: 24,
    //   },
    // },
    // {
    //   field: 'Manufacturer',
    //   component: 'Input',
    //   label: '生产厂商：',
    //   colProps: {
    //     span: 24,
    //   },
    // },
  ];

  const [
    registerForm,
    { validateFields, setFieldsValue, resetFields, clearValidate, updateSchema },
  ] = useForm({
    labelWidth: 120,
    schemas: schemas,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });
  const { createMessage } = useMessage();
  const { t } = useI18n();
  const emit = defineEmits(['submitSuccess']);
  const [register] = useModal();
  let deviceTypeList = [];
  // 获取设备类型
  async function getDeviceTypes() {
    try {
      loading.value = true;

      let res = await getdevicetypes([
        {
          PageNO: 1,
          SearchTypeName: '',
          SearchCategory: 0,
          PageSize: 1000,
        },
      ]);

      deviceTypeList = res.Rows.map((item) => {
        item.CategoryCn = CategoryObj[item.Category];
        return item;
      });
      updateSchema({
        field: 'DeviceTypeId',
        componentProps: {
          options: deviceTypeList,
        },
      });
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
  async function handleSubmint() {
    try {
      let res = await validateFields();
      if (props.info.type === 'add') {
        await adddevicemodel([res]);
      } else {
        await updatedevicemodel([{ Id: props.info.data.Id, ...res }]);
      }

      createMessage.success(t('layout.setting.operatingTitle'));
      emit('submitSuccess', {});
    } catch (error: any) {
      console.log('not passing', error);
    }
  }
  // 设置可选项

  function handleVisibleChange(visible) {
    if (visible) {
      getDeviceTypes();
      nextTick(async () => {
        if (props.info.type !== 'add') {
          setFieldsValue(props.info.data);
        }

        clearValidate();
      });
    } else {
      resetFields();
    }
  }
</script>

<style lang="less" scoped>
  .slot-select {
    width: 100%;
    height: 32px;
    padding: 0 11px;
    display: flex;
    position: relative;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
  }

  .slot-select:hover {
    border: 1px solid #1e80ff;
  }

  .slot-select-con {
    margin-right: 18px;
    line-height: 30px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000000d9;
    font-size: 14px;
  }

  .con-placeholder {
    color: #bfbfbf;
  }

  .icon-style {
    line-height: 30px;
    font-size: 11px;

    color: #bfbfbf;
  }

  .erro-style {
    border: 1px solid #ed6f6f !important;
  }

  .slot-select-diabled {
    background: #f5f5f5;
    cursor: not-allowed;

    .slot-select-con {
      color: rgba(0, 0, 0, 0.25);
    }
  }

  .slot-select-diabled:hover {
    border: 1px solid #d9d9d9;
  }
</style>
